<template>
  <div class="good">
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="地区"
      placeholder="请选择所在地区"
      @click="open"
    />
    <van-popup v-model:show="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        :field-names="filList"
        @close="show = false"
        @change="handleCity(value)"
        @finish="onFinish"
      />
    </van-popup>
  </div>
</template>

<script>
import axios from "axios";
import { ref } from "vue";
export default {
  setup() {
    const show = ref(false);
    const fieldValue = ref("");
    const cascaderValue = ref("");
    // 选项列表，children 代表子选项，支持多级嵌套
    const options = [];
    let filList = { text: "province", value: "provinceid" };
    // 全部选项选择完毕后，会触发 finish 事件
    const onFinish = ({ selectedOptions }) => {
      show.value = false;
      fieldValue.value = selectedOptions.map((option) => option.text).join("/");
    };
    return {
      show,
      options,
      onFinish,
      fieldValue,
      cascaderValue,
      filList,
      id:0,
    };
  },
  methods: {
    open() {
      this.show = true;
    },
    handleCity(id){
      console.log(this.options,'c');
       axios.post("/home/cities",id).then(res=>{
      console.log(res,'shi');
    })
    }
  },
  created() {
    //省
    axios.get("/home/proviced").then((res) => {
   
      if (res.data.code === 1) {
        this.options = res.data.data;
        
       
      }
    });
    //市
   
  },
};
</script>

<style scoped lamg="scss">
</style>